<template>
  <div class="set-container">
    <h1>用户信息</h1>
    <el-form
      label-position="left"
      label-width="80px"
      :model="userinfo"
      size="medium"
    >
      <el-form-item label="ID">
        <el-input v-model="userinfo.id" disabled></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="userinfo.name" disabled></el-input>
      </el-form-item>
      <el-form-item label="班级">
        <el-input v-model="userinfo.class" disabled></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-input
          :value="userinfo.status == 1 ? '使用中' : '丢失'"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="身份">
        <el-input
          :value="userinfo.admin == 0 ? '学生' : '管理员'"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="注册时间">
        <el-input v-model="userinfo.last_login_time" disabled></el-input>
      </el-form-item>
      <el-form-item label="密码" class="pass-line-row">
        <el-button type="primary" @click="showUpdalog">修改密码</el-button>
      </el-form-item>
    </el-form>

    <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="500px">
      <el-form
        :model="editParams"
        label-width="120px"
        :rules="formrules"
        ref="editForm"
      >
        <el-form-item label="旧密码" prop="orlpass">
          <el-input
            v-model="editParams.orlpass"
            type="password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newpass">
          <el-input v-model="editParams.newpass" type="password"></el-input>
        </el-form-item>
        <el-form-item label="再次确认密码" prop="yespass">
          <el-input v-model="editParams.yespass" type="password"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="upPassClick">确 定</el-button>
      </div>
    </el-dialog>
    <el-button @click="logout">退出登录</el-button>
  </div>
</template>

<script>
import { getUserInfo, editUserpass } from "@/api/user";
export default {
  data() {
    return {
      userinfo: {
        id: "",
        name: "",
        class: "",
        status: 1,
        admin: 0,
        last_login_time: "",
      },
      dialogFormVisible: false,
      editParams: { orlpass: "", newpass: "", yespass: "" },
      formrules: {
        orlpass: [{ required: true, message: "请输入密码", trigger: "blur" }],
        newpass: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 12,
            message: "密码长度在3-12之间",
            trigger: "blur",
          },
        ],
        yespass: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 12,
            message: "密码长度在3-12之间",
            trigger: "blur",
          },
          {
            validator: (rule, value, callback) => {
              if (value !== this.editParams.newpass) {
                callback(new Error("两次密码输入不一致"));
                return;
              }
              callback();
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    async getUserInfo() {
      const name = localStorage.getItem("name");
      const res = await getUserInfo(name);
      this.userinfo = res[0];
    },
    showUpdalog() {
      this.dialogFormVisible = true;
    },
    upPassClick() {
      this.$refs.editForm.validate(async (valid) => {
        if (valid) {
          await editUserpass({
            id: this.userinfo.id,
            pwd: this.editParams.orlpass,
            newpwd: this.editParams.yespass,
          });
          this.$message.success("密码修改成功");
          this.dialogFormVisible = false;
          this.editParams = { orlpass: "", newpass: "", yespass: "" };
        }
      });
    },
    logout() {
      this.$confirm("确认退出登录吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          localStorage.removeItem("id");
          this.$router.push("/login");
          this.$message.success("已退出登录");
        })
        .catch(() => {
          this.$message.info("已取消退出登录");
        });
    },
  },
};
</script>

<style scoped>
.set-container {
  padding: 150px 300px 200px 300px;
}
</style>